挑戰 React 第十篇

什麼是 Class Component?

與上篇提到的 function Component 的前三點敘述流程幾乎一樣，只是把 function 變成 Class。

1. 首先要有 Es6 的 Class
2. Class 可選擇性的接收 props 物件
3. 內容回傳一個 React element， 而 React Element 通常以 Jsx 的方式撰寫
4. 最大差別在於 Es6 Class 有 private 的 state 可以靈活運用 (state 與 props 下篇再介紹)

實作範例

目標

把下圖預設的 React 畫面換成 Hi Tom 文字

1. 在 src 資料夾新增一個 Hi Component

2. 在 Hi.js 檔案寫入以下程式碼

import React, { Component} from 'react';

class Hi extends Component {
  render(){
    return <h1>Hi Tom</h1>
  }
}

export default Hi

3.把 index.js 寫入 Hi Component

4. yarn start 成果

兩種Component程式碼比較

// function Component
import React from 'react';

function Hello() {
  return <h1>Hello Tom</h1>
}

export default Hello;

// Class Component
import React, { Component} from 'react';

class Hi extends Component {
  render(){
    return <h1>Hi Tom</h1>
  }
}

export default Hi

兩種Component比較

學習心得

這篇對我來說與上篇的 function Component 極相似，但差在於寫法跟效能上的問題。
提一個題外話，在查詢資料過程當中發現了hooks這個東西，function Component hooks大概就是為了與 Class Component 一樣有 state 且變得更靈活，但讓程式碼可讀性更好，而衍伸出來的一種寫法，突然覺得前端的世界變化好快啊啊啊啊！！！但我還是會先研究組內的寫法 Es6 Class + Redux